<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { formValidate, showModal } from '@/utils/tools'
import { getCityData } from '@/api/basisData'
import uploadImage from '@/components/uploadImage/index.vue'
import selectPicker from '@/components/selectPicker/index.vue'
import { teamSigns } from '@/api/training'
import { mechanismInfo } from '@/api/auth'
const cityList = ref([])
const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
const qualificationDocuments = ref([])
const institutionalForm = ref({
  id:0,
  companyName:'',
  contactPhoneNumber:'',
  provinceId:'',
  cityId:'',
  countyId:'',
  institutionInvitationStr:'',
  qualificationDocuments:''
})

const formRule = {
  companyName:{message:'请输入机构名称'},
  contactPhoneNumber:{message:'请输入机构联系电话',patternType:'phone'},
  cityId:{message:'请选择机构地址'},
  // institutionInvitationStr:{message:'请输入邀请码'},
  qualificationDocuments:{message:'请输入上传营业执照'},
}

onLoad((options:any) => {
  if (options?.institutionInvitationStr){
    institutionalForm.value.institutionInvitationStr = options.institutionInvitationStr
  }
})

onShow(() => {

  mechanismInfo().then(res => {
    if(res.code == 200){
      res.data.qualificationDocuments = res.data.qualificationDocuments ? JSON.parse( res.data.qualificationDocuments): ''
      for(let key in institutionalForm.value){
        if(res.data[key]){
          institutionalForm.value[key] = res.data[key]
        }
      }
      qualificationDocuments.value = res.data.qualificationDocuments
    }
  })
  getCityData().then(res => {
    if(res.code == 200){
      cityList.value = res.data
    }else{
      cityList.value = []
    }
  }).catch(err => {
    cityList.value = []
  })
})
const changeCity = (e:any) => {
  if(e.idList[0]){
    institutionalForm.value.provinceId = e.idList[0].value
  }
  if(e.idList[1]){
    institutionalForm.value.cityId = e.idList[1].value
  }
  if(e.idList[2]){
    institutionalForm.value.countyId = e.idList[2].value
  }
}
const teamSureNumber = async () => {
   const formData = JSON.parse(JSON.stringify(institutionalForm.value))
   formData.qualificationDocuments = qualificationDocuments.value.length == 0 ? '': JSON.stringify(qualificationDocuments.value)
  if(formData.id != 0){
    delete formData.institutionInvitationStr
  }
    await formValidate(formData, formRule)
    teamSigns(formData).then(res => {
      if(res.code == 200){
        showModal({title:"温馨提示",content:'您已提交申请，请耐心等待审核!',showCancel:false}).then(res => {
          uni.redirectTo({url:'/pages/mechanismInfo/mechanismInfo'})
        })
      }
    })
}
</script>

<template>
 <view class="sign-up">
   <xx-title title="机构注册"/>
   <up-notice-bar text="温馨提示：机构名称需与营业执照保持一致，请勿随意填写，谢谢配合！" fontSize="12" bgColor="#F56C6C" color="#ffffff"></up-notice-bar>
   <view class="sign-body">
     <view class="sign-title">机构信息</view>
     <view class="sign-item">
       <view class="sign-label required">机构名称</view>
       <view class="sign-value">
         <input type="text" v-model="institutionalForm.companyName" placeholder="请输入机构名称">
       </view>
     </view>
     <view class="sign-item">
       <view class="sign-label required">联系电话</view>
       <view class="sign-value">
         <input type="number" v-model="institutionalForm.contactPhoneNumber" placeholder="请输入机构联系电话">
       </view>
     </view>
     <view class="sign-item">
       <view class="sign-label required">机构地址</view>
       <view class="sign-value">
         <select-picker :cascade="true" v-model="institutionalForm.countyId" @change="changeCity" :columns="cityList"/>
       </view>
     </view>

<!--     <view class="sign-item" v-if="institutionalForm.id == 0">-->
<!--       <view class="sign-label required">邀请码</view>-->
<!--       <view class="sign-value">-->
<!--         <input v-model="institutionalForm.institutionInvitationStr" placeholder="请输入机构邀请码">-->
<!--       </view>-->
<!--     </view>-->

     <view class="sign-item">
       <view class="sign-label required">营业执照</view>
       <view class="sign-value">
          <upload-image :max-count="1" v-model="qualificationDocuments"/>
       </view>
     </view>
   </view>

   <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 24rpx)`}">
     <view class="seizeASeat"></view>
   </view>
   <view class="project-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 24rpx)`}">
     <view class="personal-registration" @click="teamSureNumber">提交</view>
   </view>
 </view>
</template>

<style scoped lang="scss">
  .sign-up {
    width: 100%;
    min-height: 100vh;
    padding-top: 1rpx;
    background-color: #F5F5F5;
    .sign-body{
      margin: 32rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 0 32rpx;
      .sign-title{
        padding: 24rpx 0;
        display: flex;
        align-items: flex-start;
        border-bottom: 1px solid #F5F5F5;
        font-weight: 500;
      }
      .sign-item{
        padding: 24rpx 0;
        display: flex;
        align-items: flex-start;
        border-bottom: 1px solid #F5F5F5;
        &.center{
          align-items: center;
        }
        &:last-child{
          border-bottom: none;
        }
        .sign-label{
          color: #505363;
          font-size: 28rpx;
          width: 160rpx;
          &.required{
            position: relative;
            padding-left: 20rpx;
            &:before{
              content: '*';
              display: block;
              position: absolute;
              color: #ff3c3c;
              top: 0;
              left: 0;
            }
          }
        }
        .sign-value{
          width: calc(100% - 160rpx);
          font-size: 28rpx;
          color: #21252E;
          font-weight: 500;
          input{
            width: 100%;
            font-weight: 500;
          }
          textarea{
            background-color: #F5F5F5;
            border-radius: 12rpx;
            box-sizing: border-box;
            font-weight: 500;
            width: 100%;
            padding:10rpx;
            height: 150rpx;
          }
        }
      }
    }
  }
  .valid-date-code{
    padding: 30rpx;
    .code-header{
      font-size: 32rpx;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#333333;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #EBEBEB;
    }
    .code-body{
      height: 400rpx;
      padding:1rpx;
      .motion-item{
        text-align: center;
        display: inline-block;
        padding: 20rpx 0;
        margin: 10rpx 20rpx 10rpx 0;
        font-size: 24rpx;
        width: 180rpx;
        border-radius: 8rpx;
        background-color: #EFF1F3;
        &:last-child{
          margin-right: 0;
        }
        &.check{
          background-color: #3086FE;
          color: #FFFFFF;
        }
      }
    }
  }
  .bottom-fixed{
    padding-top: 14px;
    .seizeASeat{
      height: 120rpx;
    }
  }
  .project-btn{
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    padding-left: 28rpx;
    padding-right: 28rpx;
    border-top: 1px solid #F1F2F4;
    padding-top: 14rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    .personal-registration{
      background: #92C75B;
      color: #FFFFFF;
      border-radius: 16rpx;
      width:100%;
      padding: 16rpx 0;
      letter-spacing: 2rpx;
      font-weight: 500;
      text-align: center;
      &.disabled{
        background-color: #E5E5E5;
        color:#818496;
      }
    }
  }
</style>
